<template>
  <div style="width: 80%;margin: 0 auto " >
    <a-table :dataSource="students" :columns="columns" :rowKey="record => record.id" >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-space>
            <a-popconfirm
                title="删除后不可恢复，确认删除？"
                @confirm="onDelete(record)"
                ok-text="确认"
                cancel-text="取消"
            >
              <a-button type="dashed">删除</a-button>
            </a-popconfirm>
            <a-button type="default" @click="onEdit(record)">编辑</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <a-modal v-model:open="open" title="学生" @ok="handleSubmit" ok-text="确认" cancel-text="取消">
      <a-form :model="currentStudent" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="姓名">
          <a-input v-model:value="currentStudent.stu_name" />
        </a-form-item>
        <a-form-item label="年龄">
          <a-input v-model:value="currentStudent.stu_age" />
        </a-form-item>
        <a-form-item label="性别">
          <a-select v-model:value="currentStudent.stu_sex">
            <a-select-option value="男">男</a-select-option>
            <a-select-option value="女">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="地址">
          <a-input v-model:value="currentStudent.stu_address" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import {notification} from 'ant-design-vue';

// 定义学生数据列表
const students = ref([]);
const open = ref(false);
const currentStudent = ref({});

// 定义表格列
const columns = [
  // {
  //   title: 'ID',
  //   dataIndex: 'id',
  //   key: 'id',
  // },
  {
    title: '姓名',
    dataIndex: 'stu_name',
    key: 'stu_name',
  },
  {
    title: '年龄',
    dataIndex: 'stu_age',
    key: 'stu_age',
  },
  {
    title: '性别',
    dataIndex: 'stu_sex',
    key: 'stu_sex',
  },
  {
    title: '地址',
    dataIndex: 'stu_address',
    key: 'stu_address',
  },
  // {
  //   title: '创建时间',
  //   dataIndex: 'create_at',
  //   key: 'create_at',
  // },
  // {
  //   title: '更新时间',
  //   dataIndex: 'updated_at',
  //   key: 'updated_at',
  // },
  {
    title: '操作',
    key: 'operation',
  },
];

// 编辑学生记录
const onEdit = (record) => {
  currentStudent.value = {...record};
  open.value = true;
};

// 删除学生记录
const onDelete = (record) => {
  const token = localStorage.getItem('token');

  // 如果存在token，则设置请求头
  const config = {
    headers: {
      'Token': token
    }
  };
  // console.log(token)
  // console.log(config)
  axios.delete(`/api/v1/student/${record.id}`,config)
      .then((response) => {
        const data = response.data;
        if (data.code === 0) {
          handleFetchStudents();
          notification.success({description: "删除成功！"});
        } else {
          notification.error({description: data.message});
        }
      })
      .catch((error) => {
        console.error('Delete error:', error);
        notification.error({description: '删除失败'});
      });
};

// 提交表单
const handleSubmit = () => {
  // 修改学生信息逻辑暂定
  console.log('Current student:', currentStudent.value);
  // handleFetchStudents();
  open.value = false;
};

// 获取学生数据
const handleFetchStudents = () => {
  const token = localStorage.getItem('token');

  // 如果存在token，则设置请求头
  const config = {
    headers: {
      'Token': token
    }
  };
  // console.log(token)
  // console.log(config)
  axios.get('/api/v1/student',config)
      .then((response) => {
        const data = response.data;
        if (data.code === 0) {
          students.value = data.data;
          // console.log(data);
        } else {
          notification.error({description: data.message});
        }
      })
      .catch((error) => {
        // console.error('没有得到数据:', error);
        notification.error({description: '没有得到数据'+error});
      });
};

// 在组件挂载时加载数据
onMounted(() => {
  // handleFetchStudents();
});
</script>

<style scoped>

</style>